<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入活动名称" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="活动状态：" prop="status">
          <el-select v-model="queryParams.status" placeholder="全部">
            <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="listBox">
      <div style="margin-bottom: 14px">
        <el-button type="primary" @click="handleAdd">新增分红池活动</el-button>
      </div>
      <el-table v-loading="loading" :data="tableList" stripe border>
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column label="活动名称" align="center" prop="name" />
        <el-table-column label="参与店铺数量" align="center" prop="shopNum" />
        <el-table-column label="活动时间" align="center" prop="name" width="180">
          <template slot-scope="scope">
            <p>{{scope.row.startTime}}</p>
            <p>{{scope.row.endTime}}</p>
          </template>
        </el-table-column>
        <el-table-column label="参与人数" align="center" prop="customerNum" />
        <el-table-column label="分红池金额" align="center" prop="bonusMoney" />
        <el-table-column label="活动状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="statusList" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑活动</el-button>
            <el-button size="mini" type="text" @click="handleDetail(scope.row)">活动详情</el-button>
            <el-button size="mini" type="text" @click="endClick(scope.row)"
              v-if="scope.row.status==2||scope.row.status==3">立即结束</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

    </div>
    <add-activity ref="childRef" v-if="addActivity" :id="id" :pathType="pathType" :visible.sync="addActivity"
      @success="_handleSuccess" />
  </div>

</template>

<script>
  import {
    poolList,
    poolEnd,
  } from "@/api/consumeMiningManagement/dividendPools";
  import addActivity from './components/addActivity'
  export default {
    name: "Customer",
    components: {
      addActivity
    },
    data() {
      return {
        id: '',
        addActivity: false,
        pathType: 'add',
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 会员列表表格数据
        tableList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: '', //活动名称
          status: '', //状态 1 草稿 2 待开始 3 进行中 4 已结束 shenye_bonus_pool_status
        },
        statusList: [], //状态列表
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.getDict();
      this.getList();
    },
    methods: {
      //获取状态字典
      getDict() {
        var dictType = "shenye_bonus_pool_status";
        this.$getSelectList(dictType)
          .then((res) => {
            this.statusList = res.result[0].dictList;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      /** 查询活动列表 */
      getList() {
        this.loading = true;
        poolList(this.queryParams).then(response => {
          this.total = response.result.total
          this.tableList = response.result.records
          this.loading = false;
        }).finally(() => {
          this.loading = false;
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        this.handleQuery();
      },
      /** 详情按钮操作 */
      handleView(row, type) {
        // this.$refs.dialog.open(row.id, true);
        this.$router.push({
          path: "/members/Prepaid-details",
          query: {
            id: row.id,
            type: type
          },
        })
      },
      //新增活动
      handleAdd() {
        this.addActivity = true
        this.pathType = 'add'
      },
      //编辑活动
      handleEdit(row) {
        this.addActivity = true
        this.id = row.id
        this.pathType = 'edit'
      },
      //立即结束
      endClick(row) {
        this.$confirm('是否确认结束活动，发放分红金额?', '提示', {
          confirmButtonText: '确认结束',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: row.id
          }
          poolEnd(data).then(response => {
            this.$message({
              type: 'success',
              message: '操作成功'
            });
            this.getList()
          }).catch(() => {
            
          })
        }).catch(() => {});
      },
      handleDetail(row) {
        this.$router.push({
          path: "/dividendPools-detail",
          query: {
            id: row.id,
          },
        })
      },
      _handleSuccess() {
        this.resetQuery();
      },
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }

</style>
